<template>

  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="logo">蜗牛学苑</view>
      <view class="search-input">
        <uni-icons :size="20" type="search" color="#999"></uni-icons>
        <text class="placeholder">搜索课程</text>
      </view>
      <uni-button class="sign-btn" type="primary" size="mini">签到</uni-button>
    </view>
    <!-- 轮播图 -->
、
    <!-- 课程分类 -->
    <view class="section">
<!--    <view class="section">
      <view class="section-title">课程分类</view>
      <view class="category-grid">
        <view v-for="(item, index) in menu.categories" :key="index" class="category-item">
          <image class="category-icon" :src="item.imgSrc" mode="aspectFit" />
          <text class="category-name">{{ item.categoryName }}</text>
        </view>
      </view>
    </view> -->
    <view class="section" v-for="item in treeData" :key="item.categoryId">
      <view class="section-title">专题阶段：{{item.categoryName}}</view>
      <view >
		
        <view  v-for="(itChidren, index) in item.stages" :key="index" >
        <text class="tech-name stageName">{{ itChidren.stageName }}</text>
		<view class="totalPrice">
			<text class="tech-name">购买此阶段({{ itChidren.totalPrice}})元</text>
		</view>
	
		  <view   class="tech-grid">
			  <view v-for="(itCh, index) in itChidren.courses" :key="index" >
				   <!-- <image class="tech-icon" :src="itChidren.imgSrc" mode="aspectFit" /> -->
				   <view class="tech-item"  @tap="toClass">
					<img   class="tech-icon" src="https://ai-public.mastergo.com/ai/img_res/74ffe60c2f4597306a661b48e9e24fe3.jpg" draggable="false">
				    <text  class="courseName">{{ itCh.courseName }}</text> 
					</view>

			  </view>
			 
		  </view>
        </view>
      </view>
    </view>

    <view class="section" v-for="item in menu.categories" :key="item.categoryId">
      <view class="section-title">{{item.categoryName}}</view>
      <view class="tech-grid">
        <view v-for="(itChidren, index) in item.chilren" :key="index" class="tech-item">
          <image class="tech-icon" :src="itChidren.imgSrc" mode="aspectFit" />
          <text class="tech-name">{{ itChidren.categoryName }}</text>
        </view>
      </view>
    </view>


    <!-- 底部导航栏 -->
<!--    <view class="tab-bar">
      <view v-for="(item, index) in tabItems" :key="index" class="tab-item">
        <uni-icons :type="item.icon" size="24" :color="currentTab === index ? '#2196F3' : '#999'"></uni-icons>
        <text class="tab-text" :class="{ active: currentTab === index }">{{ item.name }}</text>
      </view>
    </view> -->
  </view>
  </view>
  

</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue';
// import Swiper from '@/components/Swiper.vue';
// import { useApiStore } from '@/pages/stores/api.js'
import { post1,getChapterPost } from '@/pages/utils/api/clazz.js'

const json={}

// 初始化获取数据

onMounted(()=>{
   
})
</script>

<style>
page {
  height: 100%;
}
.totalPrice{
	  padding: 20rpx 30rpx;
}
.stageName{
	  padding: 20rpx 30rpx;
}
.container {
  min-height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.totalPrice{
	background-color: #f5f7fa;
	padding: 20rpx ;
}
.logo {
  font-size: 28px;
  font-weight: bold;
  color: #2196F3;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  height: 64rpx;
  background-color: #f5f5f5;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.placeholder {
  color: #999;
  font-size: 14px;
  margin-left: 10rpx;
}

.sign-btn {
  margin-left: 20rpx;
}

.banner {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
}

.banner-img {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 14px;
  color: #333;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tech-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 10rpx;
}

.tech-name {
  font-size: 14px;
  color: #333;

}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #eee;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.tab-text {
  font-size: 12px;
  color: #999;
  margin-top: 4rpx;
}

.tab-text.active {
  color: #2196F3;
}
.courseName{
	font-size: 12px;
}
</style>

>>>>>>> 16ca62aa608681a70842b3f98540853a4876efa7
